<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <title>发布 - 论坛</title>
    <head th:insert="~{import :: head}"></head>
    <script src="/static/js/index.js"></script>
    <script type="module" src="../static/js/wangEditor.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const inputTag = document.getElementById('tag');
            const selectTag = document.getElementById('select-tag');

            // 初始状态隐藏tag
            selectTag.style.display = 'none';

            // 输入框获得焦点时显示tag
            inputTag.addEventListener('focus', function() {
                selectTag.style.display = 'block';
            });

            // tag获得焦点时保持显示
            selectTag.addEventListener('focusin', function() {
                selectTag.style.display = 'block';
            });

            // 检查点击事件，如果点击的不是输入框或tag，则隐藏tag
            document.addEventListener('click', function(e) {
                if (e.target !== inputTag && e.target !== selectTag && !selectTag.contains(e.target)) {
                    selectTag.style.display = 'none';
                }
            })
        })
    </script>
</head>
<body>
<div class="index-body">
    <div class="fixed-top" th:insert="~{navigation :: nav}"></div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-9 col-md-12 col-sm-12" >

                <h2><svg class="bi bi-plus-square" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M8 3.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4a.5.5 0 0 1 0-1h3.5V4a.5.5 0 0 1 .5-.5z"/>
                    <path fill-rule="evenodd" d="M7.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0V8z"/>
                    <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                </svg><text th:if="${id==null}"> 发布</text><text th:if="${id!=null}"> 修改</text></h2>
                <hr>
                <form action="/publish" method="post">
                    <input type="hidden" name="id" th:value="${id}">
                    <div class="form-group">
                        <label for="title">标题</label>
                        <input type="text" class="form-control form-control-lg" th:value="${title}" id="title" name="title" autocomplete="off" placeholder="标题">
                    </div>
                    <div class="form-group">
                        <label for="description">内容</label>
                        <textarea name="description"  style="display:none" th:text="${description}" id="description" rows="10"></textarea>
                        <textarea name="plainText"  style="display:none" th:text="${plainText}" id="plainText" rows="10"></textarea>
                        <div id="editor—wrapper">
                            <div id="toolbar-container"><!-- 工具栏 --></div>
                            <div id="editor-container"><!-- 编辑器 --></div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="tag">标签</label>
                        <input type="text" class="form-control form-control-lg" th:value="${tag}" id="tag" name="tag" autocomplete="off"  placeholder="输入标签，以英文逗号,分隔">
                        <div id="select-tag" class="publish-tag">
                            <nav>
                                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                    <a th:class="'nav-item nav-link href '+ ${selectCategoryStat.first ? 'active ':''}" th:each="selectCategory,selectCategoryStat:${tags}" data-toggle="tab" th:id="${selectCategory.categoryName+'-tag'}" th:href="${'#'+selectCategory.categoryName}" role="tab" aria-controls="nav-home" aria-selected="false" th:text="${selectCategory.categoryName}"></a>
                                </div>
                            </nav>
                            <div class="tab-content" id="nav-tabContent">
                                <div th:class="'tab-pane fade '+ ${selectCategoryStat.first ? 'active show':''}" class="" th:each="selectCategory:${tags}" th:id="${selectCategory.categoryName}"  role="tabpanel" aria-labelledby="nav-home-tab">
                                    <a class="badge badge-pill badge-info tag" onclick="selectTag(this)" th:each="selectTag:${selectCategory.tags}" th:data-tag="${selectTag}" >
                                        <svg class="bi bi-tag" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" d="M.5 2A1.5 1.5 0 0 1 2 .5h4.586a1.5 1.5 0 0 1 1.06.44l7 7a1.5 1.5 0 0 1 0 2.12l-4.585 4.586a1.5 1.5 0 0 1-2.122 0l-7-7A1.5 1.5 0 0 1 .5 6.586V2zM2 1.5a.5.5 0 0 0-.5.5v4.586a.5.5 0 0 0 .146.353l7 7a.5.5 0 0 0 .708 0l4.585-4.585a.5.5 0 0 0 0-.708l-7-7a.5.5 0 0 0-.353-.146H2z"/>
                                            <path fill-rule="evenodd" d="M2.5 4.5a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm2-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                                        </svg>
                                        <text th:text="${selectTag}"></text>
                                    </a>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="alert alert-danger alert-dismissible fade show" role="alert" th:text="${error}" th:if="${error != null}"></div>
                    <button type="submit" class="btn btn-outline-success">提交</button>


                </form>
            </div>
            <div class="col-lg-3 col-md-12 col-sm-12" >
                <h3>注意：</h3>
                • 标题: 请用精简的语言描述您发布的帖子，不超过25字 <br>
                • 内容: 详细补充您的帖子内容，并确保帖子内容不违反法律法规及道德 <br>
                • 标签: 选择或自订一个或者多个合适的标签，用逗号隔开，每个标签不超过10个字<br>
            </div>
        </div>
    </div>
</div>
</body>
</html>